<template>
  <div class="panel">
    <el-input v-if="showFilter" v-model="filterValue" :placeholder="placeholder" />
    <div class="paneltable">
      <div class="table-header">
        <span v-for="(item,key) in tableTemplate" :key="key" class="table-header-text">
          <i class="fas fa-angle-double-down" title="expand all" @click="expanded=true" />
          <i class="fas fa-angle-double-up" title="shrink all" @click="expanded=false" />
          {{ item.name }}
        </span>
      </div>
      <node-panel-table
        v-for="(item,index) in dataRootNode"
        :key="index"
        :node="item"
        :data="filtedData"
        :tree-template="treeTemplate"
        :expand="expanded"
        :table-template="tableTemplate"
        @click="$emit('click',$event)"
        @dblclick="$emit('dblclick',$event)"
        @contextmenu="$emit('contextmenu',$event)"
      />
    </div>
  </div>
</template>
<script>
import { getRoot, filterBranch } from '@service/utilTool.js'
export default {
  name: 'PanelTable',
  components: {
    NodePanelTable: () => import('@components/NodePanelTable.vue')
  },
  props: {
    data: { // tree list data set
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: { // tree node display props
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'uid',
        item: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: { // flag of tree expand;false: default,shrinked;true: expanded
      type: Boolean,
      required: false,
      default: false
    },
    tableModel: { // flag of component table model;false: default,tree list;true: tree table
      type: Boolean,
      required: false,
      default: false
    },
    tableTemplate: { // table cloumn display props
      type: Object,
      required: false,
      default: () => ({
        id: { name: 'ID' },
        name: { name: '名称' },
        flag: { name: '标识' }
      })
    },
    showFooter: { // flag of footer display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    showTaggle: { // flag of taggle display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    showFilter: { // flag of filter input display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    }
  },
  data() {
    return {
      filterValue: this.filter,
      expanded: this.expand
    }
  },
  computed: {
    filtedData() {
      return filterBranch(this.data, this.filterValue, this.treeTemplate)
    },
    dataRootNode() {
      return getRoot(this.filtedData, this.treeTemplate)
    }
  }
}
</script>
<style scoped>
span {
  /* border-left: .1rem solid red; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
}
.list-header-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.panel {
  position: relative;
  width: 100%;
}
/* .paneltable {
  position: absolute;
  top: 4rem;
  left: 0;
  width: 100%;
} */
.table-header-text i {
  display: none;
  text-align: center;
  padding-right: .3rem;
}
.table-header .table-header-text:first-child i {
  display: inline-block;
}
.table-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-left: none;
}
.table-header-text {
  display: block;
  box-sizing: border-box;
  padding: .5rem 0;
  font-weight: bold;
  border-left: 1px solid #e8e8e8;
}
.table-header .table-header-text:nth-child(1) {
  width: 45%;
  padding-left: 1.5rem;
}
.table-header .table-header-text:nth-child(2) {
  width: 35%;
}
.table-header .table-header-text:nth-child(3) {
  width: 20%;
}
</style>
